Scope
Scope 範疇 -> Function Scope
會以 Function分區塊

var a = 'How ';
first();

function first() {
    var b = 'are ';
    second();

    function second() {
        var c = 'you ';
        console.log(a + b + c);
    }
}

// output: How are you

從以上可切割
Global scope = [VO(Global)] -> a
first() scope = [VO(Global)] + [VO(1)] -> a 、 b
second() scope = [VO(Global)] + [VO(1)] + [VO(2)]-> a 、 b 、 c

Scope Chain
Scope Chain 即是相的 Function Scope 由內而外的概念 -> lexical scope
lexical scope -> 定義於其他函式中的函式而產生，也就是access的概念，
同理 : 對於 first() scope 來說 second() scope 是不可見的
而 first() scope 為 second() scope 的 parent scope

其實 a、b 沒有定義於 second()中
b -> 無定義 -> 往 parent scope找 -> first() scope
a -> 無定義 -> 往 parent scope找 -> first() scope -> 無定義 -> 往 parent scope找 -> global
如果皆無定義 -> Uncaught ReferenceError

var a = 'How ';
first();

function first() {
    var b = 'are ';
    second();

    function second() {
        var c = 'you ';
        third();
    }
}

function third(){
    var d = '?'
    console.log(a + b + c + d);
}

// output:Uncaught ReferenceError: b is not defined
// 為什麼是 b，下面進行探討

以上述程式碼進行與Execution stack 比較
Execution Context : 依照 Function 呼叫順序向上堆疊

Execution Context third()
Execution Context second()
Execution Context first()
Global Execution Context 

Scope Chain : Function 定義於 Function 中由內而外概念 -> lexical scope

Global scope -> a
first() scope -> a 、 b
second() scope -> a 、 b 、 c
third() scope -> a、d
// third() 只能查找到 Global scope
// second() access to third() but second() is not third()'s parent scope

感想:我果然只會皮毛

新手練功中，如有錯誤觀念，歡迎指正!
課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 : https://cythilya.github.io/2018/10/19/function-vs-block-scope/
https://pjchender.blogspot.com/2015/12/javascriptscope-chainouter-environment.html